<template>
  <div class="carousel-container">
    <el-carousel height="300px" indicator-position="outside">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="carousel-item" :style="{ backgroundImage: 'url(' + item.image + ')', backgroundColor: item.bgColor }">
          <div class="carousel-overlay"></div>
          <div class="carousel-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <el-button type="primary" round @click="handleClick(item.action)">
              {{ item.buttonText }}
            </el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
const banners = [
  {
    id: 1,
    title: '开启你的职业之旅',
    description: '数万家企业正在招聘，找到属于你的理想工作',
    buttonText: '立即查看',
    bgColor: '#6a5acd',
    image: 'https://pica.zhimg.com/v2-8f33126c051aa33a61cc8e7b3cec4384_720w.jpg?source=172ae18b' 
  },
  {
    id: 2,
    title: '热门岗位招聘直通车',
    description: '热门岗位，最 suitable',
    buttonText: '立即查看',
    bgColor: '#4b0082',
    image: 'https://www.careercn.net/d/file/p/2022/11-28/ea521cba379e42d0d34c280f29b5dc16.jpg' 
  },
  {
    id: 3,
    title: '职业发展新机遇',
    description: '专业简历模板，助你脱颖而出',
    buttonText: '立即体验',
    bgColor: '#9370db',
    image: 'https://img.ixintu.com/download/jpg/201912/f8795b1c4c28ddfee6e1a76f3322b89a.jpg!con' 
  }
]

const handleClick = (action) => {
  console.log('Carousel item clicked:', action)
}
</script>

<style lang="scss" scoped>
.carousel-container {
  margin-bottom: 30px;
  
  .carousel-item {
    display: flex;
    align-items: center;
    padding: 0 50px;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    
    .carousel-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);  /* 半透明遮罩 */
    }
    
    .carousel-content {
      position: relative;
      z-index: 1;
      flex: 1;
      color: white;
      max-width: 600px;
      
      h2 {
        font-size: 28px;
        margin-bottom: 15px;
      }
      
      p {
        font-size: 16px;
        margin-bottom: 25px;
        max-width: 500px;
      }
    }
  }
}
</style>